//功能描述：基于智能油田样式的tab组件，当前只支持一种皮肤
//开发技术：基于jquery和base.js
//当前版本：0.0.1
//开发人：杜世峰 
//开发时间：2019-08-13
var tabTComponent = HwBase.extend({
    version:'0.0.1',
    context: {},//上下文
    tpl: '<div class="hwtab">'+
            '<ul class= "tab-title">'+
                '<% for(var item in obj){%>'+
                    '<li class="<%= obj[item].select && (obj[item].select==true) ? \'layui-this\' :\'\' %>"><%= obj[item].text %></li>'+
                '<%}%>'+
             '</ul>'+
             '<div class="tab-content">'+
                '<% for(var item in obj){%>'+
                    '<div data-id="<%= obj[item].id %>" class="tab-item <%= obj[item].select && (obj[item].select==true) ? \'tab-show\' :\'\' %>">'+
                    '</div>'+
                '<%}%>'+
             '</div>' +
          '</div>',//模板
    container: {},//容器对象
    opts: {
        env:'dev',//dev or vmd
        container: $('#container'),//容器
        width: '',//宽度
        height: '',//高度
        skin: 'default',//默认皮肤
        dataStore:[{ id: "kfdy", text: "开发单元", select: true }, { id: "fddy", text: "缝洞单元"}],
        tabChange:function(item,self,e){}
    },//默认配置项
    init: function (config) {
        //自动保存配置项
        this.__config = $.extend({}, this.opts, config);
        this.render()
        this.bind()
    },
    //可以使用get来获取配置项
    get: function (key) {
        return this.__config[key]
    },
    //可以使用set来设置配置项
    set: function (key, value) {
        this.__config[key] = value
    },
    bind: function () {
        var self = this;
        var parentNode = self.get('container') || $(document.body);//组件的jquery对象
        //tab切换事件
        parentNode.find(".tab-title li").on('click',function(e){
            var index = $("ul.tab-title li").index($(this));
            $(this).addClass('layui-this').siblings().removeClass('layui-this');
            $(".tab-content").children(".tab-item").removeClass('tab-show').eq(index).addClass('tab-show');
            if(Object.prototype.toString.call(self.get('tabChange'))=='[object Function]'){
                self.get('tabChange')(self.get('__renderData')[index],self,e);
                self.fire('tabChange',self.get('__renderData')[index],self,e);
            }
        })
    },
    render: function (data) {
        var self = this;
        data = data || self.get('dataStore');
       
        var html = self.parseTemplate(self.tpl,data);
        var currentNode = $(html)//组件模板
        
        var _guid = self.guid();//组件的唯一id
        currentNode.attr("id",_guid);

        //设置宽度、高度、和皮肤
        if(self.get('width')) currentNode.width(self.get('width'))
        if(self.get('height')) currentNode.height(self.get('height'))
        if(self.get('skin')) currentNode.addClass('hwtab-' + self.get('skin') || 'default')

        self.set('__currentNode',currentNode)
        self.set("__renderData",data);
        self.set("__guid",_guid);

        if(self.get('env')=='dev'){
            self.container = self.get('container') || $(document.body);
            self.container.append(currentNode)
        }else{
            self.container = self.get('container');
            self.container.update(html)
        }
    },
    //定义销毁的方法，一些收尾工作都应该在这里
    destroy: function () {
        var self = this
        //去掉自身的事件监听
        self.off()
        //删除渲染好的dom节点
        self.get('__currentNode').remove()
    },
      //跟新数据
    setData:function(data){
        var self = this;

        var html = self.parseTemplate(self.tpl,data);
        var newHtmlNode = $(html)

        //设置宽度、高度、和皮肤
        if(self.get('width')) newHtmlNode.width(self.get('width'))
        if(self.get('height')) newHtmlNode.height(self.get('height'))
        if(self.get('skin')) newHtmlNode.addClass('hwtab-' + self.get('skin') || 'default')

        var currentNode = self.get('__currentNode')
         if (!currentNode) return;

        currentNode.replaceWith(newHtmlNode)
        currentNode.attr('id',self.get('__guid'));
        self.set('__currentNode',currentNode)
        self.set("__renderData",data);

        self.bind();
    },
    //获取当前选中的tab对象
    getSelectTab:function(){
        var self = this;
        var currentNode = self.get('container') || $(document.body);
        return currentNode.find("ul.tab-title li.layui-this");
    },
    getSelectTabContent:function(){
        var self = this;
        var currentNode = self.get('container') || $(document.body);
        return currentNode.find(".tab-content .tab-show");
    },
    getAllTabContent: function(){
        var self = this;
        var currentNode = self.get('container') || $(document.body);
        return currentNode.find('.tab-content .tab-item');
    },
    getAllTab:function(){
        var self = this;
        var currentNode = self.get('container') || $(document.body);
        return currentNode.find("ul.tab-title li");
    },
    //添加list组件
    attachList :function(key,conf){
        var self = this;
        conf.container = $('div[data-id="'+key+'"]');
        var list = new listTComponent(conf);
        
        var tabcontents = self.get('__tabcontent');
        if(tabcontents && tabcontents.hasOwnProperty(key)){
            tabcontents[key] = list;
            self.set('__tabcontent',tabcontents)
        }else{
            var tabcont = {};
            tabcont[key] = list;
            self.set('__tabcontent',tabcont)
        }
    },
    //获取tab嵌入的内容组件
    getAttachObject : function(key){
        var self = this;
        var tabcont = self.get('__tabcontent')
        return tabcont.hasOwnProperty(key) ? tabcont[key] : null;
    }
})